import React, {PureComponent, Fragment} from 'react'
import { connect } from 'react-redux'
import {Content,  List, LoadMore} from './style'
import { actionCreater } from './store'
import { Link } from 'react-router-dom'
class ContentList extends PureComponent{
    componentDidMount(){
        this.props.getArticleData() 
    }
    render(){
            const {articleList, getMoreList, page} = this.props;
        return(
            <Fragment> 
                  {
                      articleList.map((items, index) => {
                        return (
                                <Content key = {index} >
                                    <img alt = '' className = 'content-img' src = {items.get('urlImg')} />
                                    <List>
                                    <Link  to = {'/detail/' + items.get("id")} >
                                      <h3 className = 'title'>{items.get('title')}</h3>
                                    </Link>
                                        <p className = 'desc'>{items.get('desc')}</p>
                                    </List>
                                </Content>
                           
                            
                        )
                      })
                  }
                  <LoadMore onClick = {() => getMoreList(page)} >阅读更多</LoadMore>
            </Fragment>
        )
    }
}
const mapState = (state) => ({
   articleList: state.getIn(['contentList', 'articleList']),
   page: state.getIn(['contentList', 'articlePage'])
})
const mapDispatch = (dispatch) => ({
    getArticleData(){
        dispatch(actionCreater.getArticleList())
    },
    getMoreList(page){
      dispatch( actionCreater.getMoreList(page))
    }
})
export default connect(mapState, mapDispatch)(ContentList);